<template>
  <div class="login">
    <div class="login_content">
      <h2>SIGN IN</h2>
      <!-- 下面的是表单 -->
      <el-form :model="formLabelAlign" :rules="rules" ref="formRef">
        <el-form-item prop="username">
          <el-input v-model="formLabelAlign.username" placeholder="请输入用户名" :prefix-icon="UserFilled" />
        </el-form-item>
        <div style="margin: 30px;"></div>
        <el-form-item prop="password">
          <el-input v-model="formLabelAlign.password" type="password" placeholder="请输入密码" show-password
            :prefix-icon="Lock" />
        </el-form-item>
        <div style="margin: 20px;"></div>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)" :style="{ width: '100%' }">
            <b>
              确定
            </b>
          </el-button>
        </el-form-item>
        <el-form-item>
          <div class="textRight">
            <el-tag effect="plain" @click="centerDialogVisible = true" style="cursor: pointer; height: 100%; ">
              联系我
            </el-tag>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 对话框联系我的 -->
    <el-dialog v-model="centerDialogVisible" title="微信" width="30%" align-center>
      <span>登录不上去加我微信 18803425419</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" size="small" @click="centerDialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 人机验证 -->
    <div class="mask" v-if="isShowVerify">
      <div class="verify">
        <drag-verify-img-rotate ref="dragVerify" :imgsrc="img" :isPassing.sync="isPassing" :showTips="true"
          successTip='验证成功' text="请按住滑块拖动" successText="验证通过" handlerIcon="el-icon-d-arrow-right"
          successIcon="el-icon-circle-check" @passcallback="passcallback">

        </drag-verify-img-rotate>
      </div>
    </div>
  </div>
</template>
<script lang="ts"  setup>
import { reactive, ref, inject, defineAsyncComponent } from 'vue'
// 引入路由
import { useRouter } from 'vue-router'
import { Lock, UserFilled } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { adminLogin } from '@/utils/adminHttp'
import { ElMessage } from 'element-plus'
// 引入人机验证
// 旋转图片滑块组件
const dragVerifyImgRotate = defineAsyncComponent(() => import('@/components/verification/dragVerifyImgRotate.vue'))

const formRef = ref<FormInstance>()

// from 表单
const formLabelAlign = reactive({
  username: '',
  password: ''
})

// 密码 验证
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    const reg = /^[\w+$]{6,12}$/
    reg.test(formLabelAlign.password) ? callback() : callback(new Error('密码只能是6-12位的数字下划线和字母'))
  }
}
// 用户名 验证
const validateUsername = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else {
    const reg = /^.{2,8}$/
    reg.test(formLabelAlign.username) ? callback() : callback(new Error('用户名长度是2-8位'))
  }
}
// 表单验证
const rules = reactive({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePass, trigger: 'blur' }],
})
// 联系我
const centerDialogVisible = ref(false)
// 人机验证
const isShowVerify = ref(false)
const img = '/img/visibleImg.webp'
const isPassing = ref(false)
const router = useRouter()
// 验证成功的回调
const passcallback = function () {
  isShowVerify.value = false
  router.push('/home')
  // 这个是element 的消息提示
  ElMessage({
    message: '嘿老弟，发一篇动态在走呗',
    type: 'success',
  })

}
// from表单提交
const store: any = inject('store')

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 发送请求
      adminLogin(formLabelAlign.username, formLabelAlign.password).then(res => {
        if (res.data.ok) {
          isShowVerify.value = true
          store.ChangeUsername(res.data.username)
          store.ChangeAvatar(res.data.avatar)
        } else {
          centerDialogVisible.value = true
          formLabelAlign.username = ''
          formLabelAlign.password = ''
        }
      }).catch(err => ElMessage.error('服务器错误请连联系一下开发者哦'));
    } else {
      return false
    }
  })
}

</script>
<style lang="scss">
.login_content {
  .el-input__wrapper {
    padding: 5px 11px;
  }
}

.login {
  .el-dialog__header {
    padding-bottom: 0;
  }

  .el-dialog {
    border-radius: 5px;
    max-width: 400px;
    user-select: text;
  }

  .el-dialog__footer {
    padding-top: 0;
  }

  .el-dialog__body {
    padding: 20px;
  }
}
</style>
<style lang="scss" scoped>
.login {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background: url("@/assets/bg_2.jpg") no-repeat #FEFEFE center;
  background-size: cover;
  color: #000;

  h2 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 20px;
    margin: 0 0 30px 0;
    color: #000000;
    font-weight: 500;
    line-height: 1.1;
    font-family: Verdana;
  }

  .mask {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: 0.5);
    justify-content: center;
    align-items: center;
  }

}

.login_content {
  width: 30%;
  padding: 30px;
  min-width: 300px;
  box-shadow: -4px 7px 46px 2px rgb(0 0 0 / 10%);
  background: #fff;
  margin: 150px 0 0 200px;

  .textRight {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>